<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
<script>
    document.write("<div id=\"Clock\">\n" +
        "</div>");

    // 写入一个id为Clock的div标签

    function addZero(num) {
        /*
         * @name: addZero
         * @param: int num
         * @description: TODO  把 1 变成 01
         * @date: 2020/2/21 5:43 下午
         * @return: String
         */
        return num < 10 ? "0" + num.toString() : num;
    }

    function getIntoStringOutDate(s) {
        // TODO 写一个方法获取参数字符串表示的时间 距离过年还有多少天：字符串格式：1900-11-12,  2020-11-1
        if (typeof s != "string" || s.length < 10 || s.indexOf("-") === -1) {
            // 判断格式是否合法
            return;
        }

        // 提取参数字符的年月日
        let intoYear = parseInt(s.substring(0, 4));
        let intoMonth = parseInt(s.substring(5, 7));
        let intoDay = parseInt(s.substring(8, 10));

        let intoDate = new Date(intoYear, intoMonth - 1, intoDay);
        // 从参数字符串获取一个日期
        // 注意 0 = 1月 ， 1 = 2月
        let nextDate = new Date(intoYear, 11 - 1, 1);
        let passBy = intoDate.getTime();
        let future = nextDate.getTime();
        // 1 天 等於 86,400,000 ms
        return (future - passBy) / (24 * 60 * 60 * 1000);
    }

    function getString() {
        // TODO 获取信息
        let date = new Date();
        // 获取当前时间
        let year = date.getFullYear();
        // 年
        let month = date.getMonth() + 1;
        // 月,从0开始算
        let day = date.getDate();
        // 号
        let week = date.getDay();
        let finalWeek =
            (week === 1 ? "星期一" : week === 2 ? "星期二" : week === 3 ? "星期三" : week === 4 ? "星期四" : week === 5 ? "星期五" : week === 6 ? "星期六" : "星期日");
        // 周几
        let hours = date.getHours();
        // 小时
        let minutes = date.getMinutes();
        // 分钟
        let seconds = date.getSeconds();
        // 秒
        let dateString1 = `${addZero(year)}-${addZero(month)}-${addZero(day)}`;
        // 年月日
        let beforeTheNewYear = getIntoStringOutDate(dateString1);
        return `当前时间: ${dateString1} ${finalWeek} ${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}
距离 2020-11-1 日还有 ${beforeTheNewYear}天`;
    }

    function changeDiv() {
        // TODO 改变id为Clock的div的文字
        let elementById = document.getElementById("Clock");
        // 获取id为Clock的div
        elementById.innerHTML = getString();
        // 设置内部字符串
        elementById.style.color = '#66ccff';
        // 设置字体颜色
        elementById.style.fontSize = '30px';
        // 设置字体大小
        elementById.style.border = '5px #66ccff solid';
        // 设置边框
        elementById.style.borderRadius = '10px';
        // 边框圆角
        elementById.style.width = '30%';
        // 宽
        elementById.style.height = '100px';
        // 高
        elementById.style.margin = '300px auto';
        // 外边框
        elementById.style.padding = '20px';
        // 内边框
    }

    function changeTheDive() {
        // TODO 执行每一秒刷新
        setInterval(changeDiv, 1000);
    }

    onload = function () {
        // TODO 页面一打开就执行
        changeTheDive();
    }
</script>
</body>
</html>